<template>
    <el-dialog v-model="visible" :title="$t('import')" :close-on-click-modal="false" :close-on-press-escape="false"
        width="601px">
        <template v-slot:title>
            <div class="el-dialog-slot_title">
                <svg class="icon-svg" aria-hidden="true">
                    <use xlink:href="#icon-info-circle"></use>
                </svg>
                <div class="el-dialog-slot_title__text">{{ $t('import') }}</div>
            </div>
        </template>
        <div class="ax-upload">
            <div class="ax-upload-tip">请上传需要导入的文件</div>
            <div class="ax-upload-template">下载模板：<svg class="icon-svg" aria-hidden="true">
                    <use xlink:href="#icon-file-excel"></use>
                </svg><a href="" target="_blank" rel="noopener noreferrer" download="学校账户导入模板.xlsx">学校账户导入模板.xlsx</a></div>
            <el-upload class="ax-upload-warp" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                <div class="ax-upload-warp__tip">支持上传JPG、JPEG 、PNG格式图片（不限张）</div>
                <div class="ax-upload-warp__tip">支持PDF文件上传（不限张）</div>
                <div class="ax-upload-warp__txt">单个图片/文件最大不超过30MB</div>
                <el-button type="primary" icon="el-icon-plus">上传</el-button>
            </el-upload>
        </div>
        <template v-slot:footer>
            <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
        </template>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import { isEmail, isMobile } from "@/utils/utils";
const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();

const dataForm = reactive({
    id: "",
    name: "",
    username: "",
    deptName: "",
    password: "",
    confirmPassword: "",
    realName: "",
    gender: 0,
    email: "",
    mobile: "",
    status: 1
});

const validatePassword = (rule: any, value: string, callback: (e?: Error) => any): any => {
    if (!dataForm.id && !/\S/.test(value)) {
        return callback(new Error(t("validate.required")));
    }
    callback();
};
const validateConfirmPassword = (rule: any, value: string, callback: (e?: Error) => any): any => {
    if (!dataForm.id && !/\S/.test(value)) {
        return callback(new Error(t("validate.required")));
    }
    if (dataForm.password !== value) {
        return callback(new Error(t("user.validate.confirmPassword")));
    }
    callback();
};
const validateEmail = (rule: any, value: string, callback: (e?: Error) => any): any => {
    if (value && !isEmail(value)) {
        return callback(new Error(t("validate.format", { attr: t("user.email") })));
    }
    callback();
};
const validateMobile = (rule: any, value: string, callback: (e?: Error) => any): any => {
    if (value && !isMobile(value)) {
        return callback(new Error(t("validate.format", { attr: t("user.mobile") })));
    }
    callback();
};

const rules = ref({
    username: [{ required: true, message: t("validate.required"), trigger: "blur" }],
    deptName: [{ required: true, message: t("validate.required"), trigger: "change" }],
    password: [{ validator: validatePassword, trigger: "blur" }],
    confirmPassword: [{ validator: validateConfirmPassword, trigger: "blur" }],
    realName: [{ required: true, message: t("validate.required"), trigger: "blur" }],
    email: [{ validator: validateEmail, trigger: "blur" }],
    mobile: [{ validator: validateMobile, trigger: "blur" }]
});

const init = (id?: number) => {
    visible.value = true;
    dataForm.id = "";
};

// 获取信息
const getInfo = (id: number) => {
    baseService.get(`/sys/user/${id}`).then((res) => {
        Object.assign(dataForm, res.data);
    });
};

// 表单提交
const dataFormSubmitHandle = () => {
    dataFormRef.value.validate((valid: boolean) => {
        if (!valid) {
            return false;
        }
        (!dataForm.id ? baseService.post : baseService.put)("/sys/user", {
            ...dataForm,
        }).then((res) => {
            ElMessage.success({
                message: t("prompt.success"),
                duration: 500,
                onClose: () => {
                    visible.value = false;
                    emit("refreshDataList");
                }
            });
        });
    });
};

defineExpose({
    init
});
</script>
  
<style lang="less" scoped>
.el-dialog-slot_title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    &__text {
        font-size: 18px;
        padding-left: 4px;
    }
}
.ax-upload {
    color: #000;

    &-tip {
        font-size: 16px;
        font-weight: bold;
        padding: 0 20px;
    }

    &-template {
        padding: 10px 20px;
        color: #999999;
        display: flex;
        align-items: center;

        .icon-svg {
            color: green;
        }
        
        a {
            text-decoration: underline;
        }
    }

    &-warp {
        width: 70%;
        padding: 0;

        &__tip {
            font-size: 12px;
            color: #666;
        }

        &__txt {
            font-size: 14px;
            color: #666;
            padding: 10px 0 10px;
        }
    }
}
</style>
  